<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
    <link rel="stylesheet" href="/static/easyui/uimaker/easyui.css">
    <link href="/static/easyui/uimaker/icon.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/easyui/easyui-lang-zh_CN.js"></script>
    <style type="text/css">
        a:link {color: blue; text-decoration: none}     /* 未访问的链接 */
        a:visited {color: blue}  /* 已访问的链接 */
        a:hover {color: green}    /* 当有鼠标悬停在链接上 */
        a:active {color: green}   /* 被选择的链接 */
    </style>
</head>
<body>
<div class="container">
    <div id="tb" style="padding:0 30px;">
        关键字: <input type="text" id="keyword" name="keyword" style="width:166px;height:35px;line-height:35px;"/>
        <a href="javascript:search()" id="searchBtn" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        <a href="javascript:reset();" id="setBtn" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a>
        <a href="javascript:add()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加纳税人</a>
    </div>
    <table id="dg"></table>
</div>
<div id="d1"></div>
<script type="text/javascript">
    $(function(){
        $("#dg").datagrid({
            title:"纳税人列表",
            striped:true,
            pagination:true,
            pageNumber:1,
            pageList:[2,5,10,20,30],
            rownumbers:true,
            pagePosition:"top",
            // 当url不满足正常的取值时，需要自定义ajax请求，包括请求头、请求方法、参数
            loader: function (param, success, error) {
                var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                var pageNum = $(pager).pagination('options').pageNumber; // 获取当前页码
                var pageSize = $(pager).pagination('options').pageSize;
                let keyword = $("keyword").val();
                $.ajax({
                    method: "post",
                    url:"http://localhost:10018/home/song-record/query",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify( {
                        "keyword": keyword,
                        "pageNum": pageNum,
                        "pageSize": pageSize
                    }),
                    success: success,
                    error: error
                })
            },
            // 如果接口返回的数据不是标准的total和row的属性，则需要进行映射
            loadFilter: function(data) {
                return {total: data.total, rows: data.records}
            },

            columns:[[
                {field:"songName", title: '歌名', width: "10%"},
                {field:"singer", title: '歌手',width: "5%"},
                {field:"lyricWriter", title: '作词',width: "5%"},
                {field:"lyric", title: '歌词',width: "10%"},
                {field:"country", title: '国家',width: "10%"},
                {field:"createTime", title: '创建时间',width: "10%"},
                {field:"updateTime", title: '更新时间',width: "10%"},
                {field:"fileFormat", title: '类型',width: "5%"},
                {field:"option", title: '操作',width: '15%',
                    formatter: function(value,rowData,index){
                        let content = '<button onclick="del(' +rowData.id+ ')">删除</button>' +
                            '<button onclick="edit(' +rowData.id+ ')">修改</button>' +
                            '<button onclick="detail(' +rowData.id+ ')">详情</button>'
                        return content;
                    }
                }
            ]],
            onLoadSuccess: function (){
                $("a[name='opera']").linkbutton({text:'删除',iconCls:'icon-remove'});
            },
            fixed:true,
            fitColumns: true
        });

    });

    /* doSerch函数，在每次执行完对数据库的操作之后刷新数据表 */
    function doSearch() {
        $('#dg').datagrid('load', {
            payerCode: $("#payerCode").val(),
            payerName: $("#payerName").val()
        });
    }

    /* 点击查询按钮 */
    function search() {
        doSearch();
    }

    /* 点击重置按钮，重置按钮如果要生效，则input标签不能使用easyUI的样式，必须为原生的HTML标签 */
    function reset() {
        $("#payerCode").val("");
        $("#payerName").val("");
    }

    /* 点击添加按钮 */
    function add() {
        openTopWindow({
            width : 1000,
            height : 600,
            title : "ADD",
            url : "manage/song/songAdd.html"
        })
        parent.$("#topWindow").window({
            onBeforeClose: function() {
                doSearch();
            }
        })
    }
    /* 点击删除执行的函数 */
    function del(id) {
        $.messager.confirm("警告", "确认删除？", function(data){
            if(data) {
                $.post(
                    "delete?id="+id,
                    $(this).serialize(),
                    function(data) {
                        parent.$.messager.alert("提示",data.msg, "info", function() {
                            if(data.success == true) {
                                doSearch();
                            }
                        });
                    },
                    "json"
                );
            }
        })
    }

    /* 点击修改执行的 函数 */
    function edit(id) {
        openTopWindow({
            width:1000,
            height:600,
            title:"EDIT",
            url:"manage/song/songEdit.html"
        })
        parent.$('#topWindow').window({
            onBeforeClose:function(){
                doSearch();
            }
        });
    }

    /* 点击查看详情执行的函数 */
    function detail(id) {
        openTopWindow({
            width:1000,
            height:600,
            title:"DETAIL",
            url:"manage/song/songDetail.html"
        })
    }

    /* 打开在父窗口中打开window的函数 */
    function openTopWindow(options){
        options = !options ? {} :options;
        options.width = !options.width ? 500 : options.width;
        options.height = !options.height ? 400 : options.height;
        options.url = !options.url ? "404.html" : options.url;
        options.title = !options.title ? "" : options.title;
        // 子页面调用父页面的函数
        window.parent.openTopWindow(options);
    }
</script>
</body>
</html>